<template>
  <div class="artContainer">
    <div
      class="artical"
      v-infinite-scroll="getArticals"
      infinite-scroll-disabled="disabled"
      infinite-scroll-distance="10"
    >
      <!-- 回到顶部 -->
      <template>
        <el-backtop
          :visibility-height="10"
          :bottom="80"
          :right="60"
          style="background-color: transparent"
        >
          <img
            style="height: 150px"
            src="http://60.205.247.68:9001/image/top2.png"
            alt=""
          />
        </el-backtop>
      </template>
      <el-row
        v-for="art in articals"
        :key="art.articalId"
        style="width: 100%; margin-bottom: 3rem"
      >
        <div class="artHeader">
          {{ art.articalTitle }}
        </div>
        <div class="artContent">
          <el-image
            :src="imgUrl + art.articalImg"
            fit="contain"
            lazy
            style="width: 130%"
          />
          <div class="desp" style="padding: 14px">
            <span>{{ art.articalDesp }}</span>
          </div>
        </div>
      </el-row>
    </div>
    <recommend class="recmd" ref="recmd" />
  </div>
</template>

<script>
import Recommend from "./Recommend.vue";
export default {
  components: { Recommend },
  name: "Artical",
  data() {
    return {
      currentPage: 1,
      noMore: false,
      articals: [],
      imgUrl: this.$imageUrl,
    };
  },
  methods: {
    getArticals() {
      this.$axios({
        url: "/works/getArticals",
        params: {
          pageNo: this.currentPage++,
          pageSize: 10,
          order: "update_time desc",
        },
      })
        .then((res) => {
          console.log("文章数据", res.data.data.records);
          if (res.data.status == 200) {
            if (res.data.data.records.length == 0) {
              this.noMore = true;
            }
            this.articals = res.data.data.records;
            this.noMore = false;
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
          this.noMore = true;
        });
    },
  },
  mounted() {
    this.getArticals();
    this.$refs.recmd.getRecmd();
  },
  computed: {
    disabled() {
      return this.noMore;
    },
  },
};
</script>

<style lang="less" scoped>
/* 整体背景 */
.artContainer {
  position: relative;
  display: flex;
  gap: 1rem;
}

.artical {
  width: 55%;
  margin-top: 5rem;
  margin-left: 10%;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 文章标题 */
  .artHeader {
    background-color: #fff;
    padding: 1rem;
    text-indent: 2em;
    line-height: 1.5em;
    letter-spacing: 0.1rem;
  }
  .artContent {
    display: flex;
    padding: 0 2rem;
    background-color: rgb(253, 241, 225);
    border-bottom: 3px solid #bc080b;
    /* 文章描述 */
    .desp {
      width: 170%;
      display: flex;
      align-items: center;
      margin-left: 1rem;
      text-indent: 2em;
      letter-spacing: 1.5px;
      line-height: 1.5em;
    }
    transition: 0.5s all;
  }
  .artContent:hover {
    border-bottom: 7px solid #bc080b;
    transform: translateY(-10px);
  }
}
</style>
